<html>
<head>
	<title>For stall owner</title>
	<link rel="stylesheet/less" type="text/css" href="styles.less">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="http://lesscss.org/js/less.js"></script>
	<script>
		var canteen_arr = ["FASS", "Engin", "Science", "Forum", "Mochtar Riady",
				"Staff Club", "Soc/Biz", "SRC", "UCC", "Uni Hall", "Med", "YIH",
				 "CREATE", "ERC"];
		var udid_arr = [];
		$(function(){
			$.getJSON('http://soledroid.huytoan.com/udid.php?callback=?', function(res) {
				udid_arr = res;
				
				for(var i = 0; i < udid_arr.length; i++){
					$("#devices").append("<div class='" + udid_arr[i] + "'>" + udid_arr[i] + "</div>");
				}
			});
			
			$.getJSON('http://soledroid.huytoan.com/dish.php?callback=?', function(res) {
				var rows;
				$.each(res, function(key, val){
					var option;
					if(val.on_promotion == 1){
						option = "<select><option selected='selected' value='1'>Yes</option><option value='0'>No</option></select>";
					} else{
						option = "<select><option value='1'>Yes</option><option selected='selected' value='0'>No</option></select>";
					}
					rows += "<tr id='" + val.id + "' class='" + val.name + "'>" +
							"<td><img width='50' height='50' src='http://soledroid.huytoan.com/images/dishes/" + val.image + "' />" + val.name + "</td>" +
							"<td>" + val.price + "</td>" +
							"<td>" + val.description + "</td>" +
							"<td>" + option + "</td>" +
							"</tr>";
				});
				
				$("table").append(rows);
				
				bindEvents();
			});
		});
		
		function bindEvents(){
			$("select").each(function(){
				$(this).change(function(){
					var id = $(this).parents("tr").attr("id");
					var dishName = $(this).parents("tr").attr("class");
					var newVal = $(this).val();
					var path = "http://soledroid.huytoan.com/dish.php?id=" + id + "&on_promotion=" + newVal + "&ajax=1&callback=?";
					console.log("path: " + path);
					$.getJSON(path, function(res){
						console.log(res);
					});
					
					if(newVal==1){
						sendNotification(id, dishName);
					}
				});
			});
		}
		
		function sendNotification(id, dishName){          
			var message = "New offer available: " + dishName + " - " + id;   
			console.log("message:" + message);
			for(var i = 0; i < udid_arr.length; i++){
				var device = udid_arr[i];
				var target = 'tokudu/' + device;      
				   		
				$.ajax({
					url: 'send_mqtt.php',
					type: 'POST',
					data: {'target': target, 'message': message},
					dataType: 'text',
					timeout: 20000,
					error: function(){
						console.log("error");
					},
					success: function(text){
						if (text == '') {
							console.log('Failed to send the message. Try again!')                        
						} else {
							console.log(text);
						}
					}
				});
			}
         }
	</script>
	</head>
	<body>
		<h1>Eatversity</h1>
		<h2>For stall owners: Dishes & Promotion</h2>
		
		<div id="devices">
			<?php
			require('SAM/php_sam.php');

			//create a new connection object
			$conn = new SAMConnection();

			//start initialise the connection
			$result = $conn->connect(SAM_MQTT, array(SAM_HOST => '137.132.145.205', SAM_PORT => 1883));      
			if ($result) {
			  $conn->disconnect();
			  print_r("Server Status:<span class='online'>Online</span>");
			} else {
			  print_r("Server Status:<span class='offline'>Offline</span>");
			}
			?>
			<h4>List of devices</h4></div>
		<table>
			<thead>
				<tr><td>Dish</td><td>Price</td><td>Description</td><td class="promotion">On Promotion</td></tr>
				</thead>
			</table>
		</body>
</html>